<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素遍历</title>
        <!-- 元素遍历：  用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
           children()     功能：获取匹配元素集合中每个元素的子元素
           parent()       功能：获取匹配元素集合中每个元素的父元素
           
           siblings()     功能：获取匹配元素集合中每个元素所有兄弟元素
           
           next()         功能：获取匹配元素集合中每个元素下一个兄弟元素
           prev()         功能：获取匹配元素集合中每个元素上一个兄弟元素
           
           each()
        -->
        <script src="../js/jquery-1.11.1.js"></script>
        <style>
            .container{
                border: 1px solid red;
                padding: 10px;
                margin: 10px;
            }
            .box{
                background-color: aqua;
                padding: 10px;
                margin: 10px;
            }
            button{
                padding: 5px;
                margin: 10px;
                
            }
            .sty{
                 border-radius: 50%; 
                 background-color: #ff00ff; 
                 box-shadow: 0 0 10px rgba(0,0,0,0.5);
                 width:300px;
                 height:300px;
                 background-image:url(../img/456.gif);
                            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box" id="box1">盒子1</div>
            <div class="box" id="box2">盒子2</div>
            <div class="box" id="box3">盒子3</div>
            <div class="box" id="box4">盒子4</div>
            <div class="box" id="box5">盒子5</div>
            <div class="box" id="box6">盒子6</div>
        </div>
        <button id="gc">获取子元素</button>
        <button id="gp">获取父元素</button>
        <button id="gs">获取兄弟元素</button>
        <button id="gn">获取下一个兄弟元素</button>
        <button id="gr">获取上一个兄弟元素</button>
        <button id="loop">遍历元素</button>
        <script>
            /* 1.点击获取子元素 按钮  实现.container下所有子元素添加背景色 */
            $("#gc").click(function(){
                //通过 父找子 函数 --添加效果
                $(".container").children().css("background-color","blue");
            });
            /* 2.点击获取父元素  实现container 添加背景色 */
            $("#gp").click(function(){
                $(".box").parent().css("background-color","red");
            });
            /* 3.获取所有的兄弟元素 按钮   实现除了盒子4 别的都变色 */
            $("#gs").click(function(){
                $("#box4").siblings().css("background-color","yellow");
            });
            /* 4.点击获取下一个兄弟元素 按钮 实现box4的下一个兄弟 */
            $("#gn").click(function(){
                $("#box4").next().css("background-color","#e4393c");
            });
            /* 5.点击获取上一个兄弟元素 按钮 实现box6上一个兄弟 添加效果
             圆、背景图、背景色、盒子阴影
             */
           $("#gr").click(function(){
                           $("#box6").prev().addClass("sty");
                       });
                    
        </script>
    </body>
</html>